#@layout()
 
 
### content 块
#define content()

<div>&nbsp;</div>
<div class='param'>

</div>

<textarea class="param hide" >#(param)</textarea>
<textarea class="template accordion_html hide"><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false"><%html%> </div></textarea>
<textarea class="template accordion hide">
<div class="panel panel-default">
 <div class="panel-heading" role="tab" id="heading<%s%>">
   <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion"
					href="#collapse<%s%>" aria-expanded="false"
					aria-controls="collapse<%s%>">
       <%title%>
        </a>
      </h4>
 </div>
  <div id="collapse<%s%>" class="panel-collapse collapse"
			role="tabpanel" aria-labelledby="heading<%s%>">
  <div class="panel-body" style='background-color:#F5F5F5'><%body%>
  </div>
  </div>
</div>
</textarea>
#end

### JS 块

#define js()

    <script type="text/javascript">
    
		$(function () {
			var html=[];
			
		    //var param=eval("("+ window.atob( $("textarea.param").text() ) +")")   ;
		    var param=eval("("+ new Base64().decode( $("textarea.param").text() ) +")")   ;

		    var accordion_html=$("textarea.template.accordion_html").text();

		    var build_system = function(system) {
		        var html = [];
		        for (var key in system) {
		            var value = system[key];
		            var txt = "<div class='row' style='margin:4px; '>  <div class='col-md-2 text-right'>"+key+"</div>  <div class='col-md-10'>"+value+"</div> </div> ";
		            html.push(txt);
		        }
		        return "<div>"+html.join("")+"</div>";
		    }
		    
		    var build_request = function(request) {
		        var q=0;
		        var html = [];
		        var table = [];
		        table.push("<table class='table table-bordered'>");
		        $(request).each(function(i, e) {
		            for (var key in e) {
		                var value = e[key];
		                var tr = [];
		                if(q++<1){  //row
			                tr.push("<tr>");
			                var i=0;
			                for (var k in value) {
			                	if(i++>0){
				                    tr.push("<th>" + k + "</th>");
			                	}else{
			                		  tr.push("<th>" +"No" + "</th>");
			                	}
			                }
			                tr.push("</tr>");
		                } 
		                
		                tr.push("<tr>");
		                var i=0;
		                for (var k in value) {
		                	if(i++>0){ // col
			                    var v = value[k];
			                    tr.push("<td>" + v + "</td>");
		                	}else{
		                		 tr.push("<td>" + q + "</td>");
		                	}
		                }
		                tr.push("</tr>");
		                
		                table.push(tr.join(""));
		            }
		        });
		        table.push("</table>");
		        html.push(table.join(""));
		        return "<div>" + html.join("") + "</div>";
		    }
		    
		    var build_body = function(value){
		    	var html=[],  name=value.name||'', system=value.system||{},   request=value.request||{}, response=value.response||{};
		    ///	html.push("<div class='system'><p class='bg-primary'>"+name+"</p></div>");
		    	//html.push("<div class='system'><p class='bg-danger' style='padding:12px'>"+JSON.stringify(system)+"</p></div>");
		    	//html.push("<div class='request'><p class='bg-info' style='padding:12px'>"+JSON.stringify(request)+"</p></div>");
		    	//html.push("<div class='response'><p class='bg-success' style='padding:12px'>"+JSON.stringify(response)+"</p></div>");
		    	html.push("<div class='system' style='margin:8px'><div class='bg-danger' style='padding:12px'><b>system</b><hr>"+build_system(system)+"</div></div>");
		    	html.push("<div class='request' style='margin:8px'><div class='bg-success' style='padding:12px'><b>request</b><hr>"+build_request(request)+"</div></div>");
		    	html.push("<div class='response' style='margin:8px'><div class='bg-warning ' style='padding:12px'><b>response</b><hr>"+build_request(response)+"</div></div>");
		    	return  html.join("");
		    };
		    
		    var build_accordion = function(key,value){
		    	var data={"title": key , "body": build_body(value) , "s":""+(1+Math.round(Math.random()*8888+8))   };
		    	var tpl=$("textarea.template.accordion").text();
		    	var txt =  new Template().helper(tpl,data);
		    	return txt;
		    };
		    for( var key  in param ) {
		    	var value=param[key];
		    	var txt= build_accordion(key,value ) ; 
		    	html.push( txt ) ;
		    }
		    
			var txt_accordion_html = new Template().helper(accordion_html,{"html": html.join("") });
			//console.log(txt_accordion_html);
			$("div.param").html(txt_accordion_html) ;
		});
    </script>
#end